import Taro, { redirectTo, setNavigationBarTitle } from '@tarojs/taro'
import { View, Image, Text, Input, Form, Button } from '@tarojs/components'
import { AtIcon, AtForm, AtButton, AtInput, AtSteps } from 'taro-ui'
import React, { useState, useEffect } from 'react'

import api from '../../../utils/api'
import request from '../../../utils/request'

import './step1.less'

function AuthSteps(props, ref) {
  const { handleNext } = props
  useEffect(() => {
    try {
      const data = Taro.getStorageSync('loginInfo')
      if (data) {
        setUserId(data.member_id)
        setName(data.real_name)
        setIdNumber(data.id_card)
      }
    } catch (error) {
      Taro.showToast({
        title: '获取用户信息失败',
        icon: 'none'
      })
    }
  }, [])
  const [statusItems, setStatusItems] = useState([
    { 'title': '实名认证' },
    { 'title': '上传身份证' },
    { 'title': '接受任务' },
    { 'title': '确认协议' }
  ])
  const [currentStep, setCurrentStep] = useState(0)
  const [userId, setUserId] = useState(0)
  const [name, setName] = useState('')
  const [idNumber, setIdNumber] = useState('')

  const handleNameChange = (val) => {
    setName(val)
  }
  const handleIdNumberChange = (val) => {
    setIdNumber(val)
  }
  const onSubmitFrom = (e) => {
    let data = e.detail.value
    Taro.showLoading({
      title: '实名认证中...',
      mask: true
    })
    try {
      request(api.updateUser, 'POST', data).then((data) => {
        Taro.hideLoading()
        handleNext(1)
      })
    } catch (error) {
      Taro.hideLoading()
      Taro.showToast({
        title: '提交失败'
      })
    }
  }
  return (
    <View className='ca'>
      <View className='layout'>
        <View className='bg'></View>
        <View className='top'></View>
        <View className='cell-group group'>
          <View className="step">
            <AtSteps
              items={statusItems}
              current={currentStep}
            />
          </View>
          <Form className="form" onSubmit={onSubmitFrom}>
            <View className="title">个人信息</View>
            <View className="tips">请认真填写以下信息 , 否则无法通过实名认证 , 最多只有两次机会!</View>
            <View className="form-item">
              <View className="label">真实姓名</View>
              <Input name='real_name' type='text' className="input" placeholder='请输入真实姓名'></Input>
            </View>
            <View className="form-item">
              <View className="label">身份证号</View>
              <Input name='id_card' type='text' className="input" placeholder='请输入身份证号'></Input>
            </View>
            <View className="title">银行信息</View>
            <View className="tips">请认真填写以下信息 , 否则无法通过实名认证 , 最多只有两次机会!</View>
            <View className="form-item">
              <View className="label">银行卡号</View>
              <Input name='bank_number' type='text' className="input" placeholder='请输入银行卡号'></Input>
            </View>
            <View className="form-item">
              <View className="label">开户银行</View>
              <Input name='bank_title' type='text' className="input" placeholder='请输入开户银行'></Input>
            </View>
            {/* <View className="form-item">
              <View className="label">开户银行地址</View>
              <Input name='bank_address' type='text' className="input" placeholder='请输入开户银行地址'></Input>
            </View> */}
            <Button className="form-button" formType="submit">下一步</Button>
          </Form>
        </View>
      </View>
    </View>
  )
}

export default AuthSteps
